<!--
 * @Description:，秒杀
 * @version: v1.0
 * @Author: Wang Xi
 * @Date: 2023-5-18 18:10:00
 * @LastEditors: Yejing
 * @LastEditTime: 2023-06-10 17:30:02
-->
<template>
	<view class="seckill-container">
		<c-navigation-bar :bgColor="true" :title='$t("home.LightningDeals")'>
		</c-navigation-bar>
		<view class="container-box">
			<scroll-view scroll-left="0" scroll-x="true" class="scroll-X">
				<view class="scroll-x-box">

					<view class="scroll-x-item" @click="clickSeckill(item)"
						:class="`tag-item ${currentTime.id === item.id?'active':''}`" v-for="item in timeList" :key="item.id">
						{{timestampToTime(Number(item.startTime))}} {{$t('shop.start')}}
					</view>
				</view>
			</scroll-view>
			<view class="seckill-products-list">
				<cartItem radius="26rpx" :data="item" v-for="item in seckillProductList" :key="item.id" :checkShow="false"
					:isSeckill="true">


					<view class="masking" slot="btn" v-if="item.shopIds&&item.shopIds.length==0">
						<view class="maskingMes">
							{{$t('home.acitiveEnd') }}
						</view>
					</view>
					<view class="slot-btn" slot="btn" v-else>
						<u-button @click="goSeckillProductDetails(item)">
							<u-icon name="arrow-right"></u-icon>
						</u-button>
					</view>
				</cartItem>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前选中时间栏
				currentTime: '',
				timeList: [{
					time: '10:00',
					id: '0'
				}, {
					time: '12:00',
					id: '1'
				}, {
					time: '14:00',
					id: '2'
				}, {
					time: '16:00',
					id: '3'
				}],
				curTabIndex: '',
				// 秒杀商品列表
				seckillProductList: []
			};
		},
		onLoad() {
			this.$u.post('/app/seckillActivity/query', {
				activityLocaltion: 1
			}).then(res => {
				this.timeList = res.data


				this.currentTime = res.data[0]
				const t1 = new Date().valueOf()
				let time = t1 - Number(res.data[0].startTime)

				if (time < 0) {
					uni.setStorageSync('seckillIsStart', 0)
				} else {
					uni.setStorageSync('seckillIsStart', 1)
				}
				this.getCartListAjax(this.currentTime.id)
			})
		},
		methods: {
			// 			// 获取时间段
			backEvent() {
				uni.reLaunch({
					url: '/pages/home/home'
				})
			},
			clickSeckill(item) {
				this.currentTime = item

				const t1 = new Date().valueOf()
				let time = t1 - Number(item.startTime)


				if (time < 0) {

					uni.setStorageSync('seckillIsStart', 0)
				} else {

					uni.setStorageSync('seckillIsStart', 1)
				}
				this.getCartListAjax(item.id)
			},
			// 获取秒杀商品列表
			getCartListAjax(activityId) {
				this.$u.post('/app/seckillActivity/goodList', {
					activityId: activityId,

					size: 99999,
					current: 1
				}).then(res => {
					this.seckillProductList = res.data.records

				})
			},
			// 查看秒杀商品详情
			goSeckillProductDetails(item) {
				let orderData = JSON.stringify(item);
				let newStr = orderData.replace(/%/g, '%25');
				console.log(item, newStr)
				uni.navigateTo({
					url: `/pages/seckillProductDetails/seckillProductDetails?data=` + encodeURIComponent(newStr),
					animationType: 'slide-in-right',
					animationDuration: 300
				});
			},
			timestampToTime(timestamp) {
				// 时间戳为10位需*1000，时间戳为13位不需乘1000
				var date = new Date(timestamp);

				var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
				var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
				var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
				return `${h} : ${m} :${s}`;
			}
		},

	}
</script>

<style lang="scss" scoped>
	.seckill-container {
		.container-box {
			height: 100vh;




			.scroll-X {
				height: 70rpx;

				.scroll-x-box {
					display: flex;

					.scroll-x-item {
						white-space: nowrap;
						margin-right: 16rpx;
						text-align: center;
						padding: 8rpx 24rpx;
						height: 56rpx;
						background: #f6f7fb;
						border-radius: 120rpx;
						color: #1e2432;
						font-size: 26rpx;
						font-family: Helvetica;
						box-sizing: border-box;
					}

					.active {
						color: #fff;
						border: 2rpx solid #2934d0;
						box-sizing: border-box;
						background: #2934d0;
					}
				}
			}

			>.seckill-products-list {
				margin-top: 66rpx;

				>view {
					margin-bottom: 30rpx;
					position: relative;

					.masking {
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						color: #fff;
						z-index: 999;
						display: flex;
						background:#666666ba;
						align-items: center;
						justify-content: center;

						.maskingMes {
							word-wrap: break-word;
							text-align: center;
							white-space: normal;
							width: 70px;
							font-size: 15px;
						}
					}
				}

				.slot-btn {
					display: flex;
					align-items: center;

					>button {
						width: 60rpx;
						height: 60rpx;
						background: #1B1D29;
						border-radius: 14rpx;
						color: #fff;
						padding: 0;
						line-height: 60rpx;
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>